<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 页面meta -->

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>注册</title>

    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" th:href="@{/static/plugins/elementui/index.css}">

    <link rel="stylesheet" th:href="@{/static/plugins/font-awesome/css/font-awesome.min.css}">

    <link rel="stylesheet" th:href="@{/static/css/style.css}">
</head>

<body class="hold-transition">
<div align="center" id="app">
    <font face="楷体" size="10">
        <b style="color: #66b1ff">注册页面</b>
    </font>
    <div class="app-container">
        <div class="box">
            <div class="filter-container">
                <form action="/document/users" method="post">
                    <table>
                        <tr>
                            <td>用户昵称：</td>
                            <td>
                                <input name="username" type="text" id="username">
                            </td>
                        </tr>
                        <tr>
                            <td>用户账号：</td>
                            <td>
                                <input name="userNumber" type="text" id="userNumber">
                                <div id="errorMsg" style="display: none">该账号已被注册过（不能为空！），请重新输入！</div>
                            </td>
                            <td>
                                <p style="color: red" th:text="${registerMessageNumber}" th:if="${not #strings.isEmpty(registerMessageNumber)}"></p>
                            </td>
                        </tr>
                        <tr>
                            <td>用户密码：</td>
                            <td>
                                <input name="password" type="password" id="password">
                            </td>
                        </tr>
                        <tr>
                            <td>请输入验证码：</td>
                            <td>
                                <input name="code" type="text" id="code"> <el-button type="primary" class="butT" @click="getCode()" style="width: 100px;">获取验证码</el-button>
                            </td>
                            <td>
                                <p style="color: red" th:text="${registerMessageCode}" th:if="${not #strings.isEmpty(registerMessageCode)}"></p>
                            </td>
                        </tr>
                    </table>

                    <br>
                    <div align="center">
                        <input value="注册" type="submit" id="register">
                        <br><br>
                        <!--<button onclick="r()" type="button">返回首页</button>-->
                    </div>
                </form>
                <form action="/document/users/in" method="post">
                    <input type="submit" value="返回首页">
                </form>
            </div>
        </div>
    </div>
</div>
</body>

<!-- 引入组件库 -->
<script th:src="@{/static/js/vue.js}"></script>
<script th:src="@{/static/plugins/elementui/index.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/js/axios-0.18.0.js}"></script>

<script>
    var vue = new Vue({
        el: '#app',
        //这个data里面定义的数据是在上面页面中已经有的被命名好的数据总称，且他们之间的内容是一样的
        data:{
            dataList: [],//定义了当前页要展示的列表数据
            dialogFormVisibleCreate: false,//创建文件表单是否可见
            dialogFormVisibleEdit:false,//重命名文件表单是否可见
            dialogFormVisibleMove:false,//移动文件表单是否可见
            dialogFormVisibleOpen:false,//进入文件夹按钮是否可见
            formData: {},//定义收集的表单数据
            rules: {
                filename: [{ required: true, message: '文件名称为必填项', trigger: 'blur' }]
            },//定义校验规则
            pagination: {
                currentPage: 1,//当前页码
                pageSize:10,//每页显示的记录数
                total:0,//总记录数（刚开始不知道，所以指定为零）
                filePath: "/",
                filename: ""
            }//定义分页相关模型数据
        },

        //钩子函数，VUE对象初始化完成后自动执行，在浏览器中输入 http://localhost:8080/pages/books.html 地址后，自动会执行 created() 中的代码，从而实现填充页面
        created() {
        },

        //这个method中定义的方法都是在上面页面中被指定的某一个控件被点击之后会执行的方法，相当于就是事件监听
        methods: {

            getCode(){
                alert("你好")
                var error = document.getElementById("errorMsg");
                error.style.display = "none";
                var userNumber = document.getElementById("userNumber").value;
                if($.isEmptyObject(userNumber)){
                    alert("用户账号不能为空！")
                } else {
                    alert("请稍等！正在准备给"+userNumber+"发送验证码~~~")
                    axios.post("/document/users/send/" + userNumber).then((res) => {
                        if(res.data.flag){
                            error.style.display = "none";
                            alert("验证码正在给 " + userNumber + " 发送途中~~~，快到啦！")
                        } else {
                            error.style.display = "";
                            alert(userNumber + "该账号已被注册过（不能为空！），请重新输入！")
                        }
                    });
                }
            }
        }
    })

</script>
</html>